<template>
  <div class="current-main">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <div class="content">
      <MainTitle :main-title="mainTitle" />
      <SystemSwitch :current-system="system" @setSystem="setSystem" />
      <div class="date">
        <span class="date-text">起始时间: </span>
        <el-date-picker
          v-model="startDate"
          class="date-style"
          type="date"
          placeholder="选择日期"
          @change="setSystem(system)"
        />
        <span class="date-text">结束时间: </span>
        <el-date-picker
          v-model="endDate"
          class="date-style"
          type="date"
          placeholder="选择日期"
          @change="setSystem(system)"
        />
      </div>
      <div class="main-charts">
        <!-- <loading v-show="runFlag" class="loading" /> -->
        <div v-show="hasNoData" class="no-data">当前时间段暂时没有数据</div>

        <!-- 总流量start -->
        <div class="card-main-current">
          <div class="card-item">
            <div class="item-left">
              <div class="item-content">
                <div class="item-name"> {{ itemName }} </div>
              </div>
            </div>
            <div class="item-right">
              <vechart :options="realOptions" />
            </div>
          </div>
        </div>
        <!-- 总流量end -->
        <div class="outside-frame" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
          <div :class="isScrollTop? 'up left' : 'none'" @click.stop="scrollUp"><img src="~@assets/image/up_small.png" alt=""></div>
          <div :class="isScrollTop? 'up right' : 'none'" @click.stop="scrollUp"><img src="~@assets/image/up_small.png" alt=""></div>
          <div :class="isScrollBottom? 'down left' : 'none'" @click.stop="scrollDown"><img src="~@assets/image/down_small.png" alt=""></div>
          <div :class="isScrollBottom? 'down right' : 'none'" @click.stop="scrollDown"><img src="~@assets/image/down_small.png" alt=""></div>
          <div ref="scrollFrame" class="scroll-frame" @scroll="scroll">
            <currentCard v-for="(item,index) in newEqmList" :key="index" ref="currentCard" :eqm="item" :index="index+1" class="current-card" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import options from './optionscopy.json'
import 'element-ui/lib/theme-chalk/index.css'
import { mapState } from 'vuex'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    currentCard: () => import('./CurrentCard.vue'),
    // loading: () => import('@/components/loading.vue'),
    SystemSwitch: () => import('@/components/SystemSwitch.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      system: 'hcda',
      eqmList: [],
      startDate: new Date(new Date().setHours(0, 0, 0, 0)),
      endDate: new Date(),
      notTouchTop: true,
      isMouseEnter: false,
      notTouchBottom: false,
      scrollTop: 0,
      runFlag: false,
      // mainTitle: '智慧节能-CDA历史电流与流量统计',
      hasNoData: false,
      options: options,
      dataList: [],
      itemName: ''
    }
  },
  computed: {
    mainTitle() {
      return '智慧节能-' + this.title
    },
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    isScrollTop() { // 布尔值，直接决定了上方按钮会不会显示
      return this.isMouseEnter && this.notTouchTop
      // 需要同时满足1.鼠标进入；2.滚动块没有停留在顶部。
    },
    isScrollBottom() {
      return this.isMouseEnter && this.notTouchBottom
    },
    realOptions() {
      if (!this.eqmList[0]) {
        return this.options
      }
      return { ...this.options, series: { ...this.options.series, data: this.eqmList[0].value }, xAxis: { ...this.options.xAxis, data: this.dataList }}
    },
    newEqmList() {
      return this.eqmList.slice(1)
    }
  },
  created() {
    this.$nextTick(() => {
      this.setSystem('hcda')
      console.log(this.realOptions)
    })
  },
  methods: {
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    async getCurrentTraffic() {
      try {
        this.runFlag = true
        const startDate = Math.round(this.startDate.getTime() / 1000)
        const endDate = Math.round(this.endDate.getTime() / 1000)
        await this.sleep(1000)
        const result = await this.service.getCDACurrentTraffic(
          { 'id': this.system, 'begin_time': startDate, 'end_time': endDate }
        )
        if (result.data && result.flag) {
          console.log('traffic', result.data, result.flag)
          this.eqmList = result.data
          this.dataList = this.eqmList[0].date[0] ? this.eqmList[0].date : []
          this.itemName = this.eqmList[0].name
          console.log('traffic11', this.eqmList)
          console.log('traffic22', this.newEqmList)
        }
        if (!result.data) {
          this.$notify({
            title: '数据为空',
            type: 'error',
            duration: 2500
          })
        }
        this.runFlag = false
        this.hasNoData = !(this.eqmList && this.eqmList.length)
      } catch (e) {
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
        this.runFlag = false
        this.hasNoData = true
      }
    },
    mouseEnter() {
      this.isMouseEnter = true
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    mouseLeave() {
      this.isMouseEnter = false
    },
    setSystem(type) {
      if (!this.startDate || !this.endDate) return
      this.system = type
      this.getCurrentTraffic()
    },
    scrollUp() {
      this.scrollTop = this.scrollTop - 20
      this.$refs.scrollFrame.scrollTop = this.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    scrollDown() {
      this.scrollTop = this.scrollTop + 20
      this.$refs.scrollFrame.scrollTop = this.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight + 10
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    scroll() {
      this.scrollTop = this.$refs.scrollFrame.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight + 10
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    }
  }
}

</script>

<style lang="scss" scoped>
.content{
  position: relative;
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.main-charts{
  height: 68%;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}
.outside-frame{
  height: 77%;
  position: relative;
  margin-top: 1rem;
}
.card-main-current{
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    border:none;
}

.card-item{
  display: flex;
  margin-top: 1%;
  flex: 1;
}
.item-left{
  display: flex;
  flex:0 1 10%;
  background: rgba(6,72,119,0.4);
}
.item-right{
  flex: 3;
}
.item-name{
  height: 8.5rem;
  line-height: 8.5rem;
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出文本以省略号显示 */
}
.scroll-frame .current-card:first-child .item-content-name{
   font-size: 1.2rem;
   font-weight: 600;
   line-height: 84px;
}
.item-content{
  border: 1px solid #394c62;;
  flex: 1 0;
  text-align: center;
  line-height: 40px;
  padding: 0 10px;
}

.main-charts .scroll-frame{
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow-y:scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.main-charts .up,.main-charts .down{
  height: 2rem;
  background: rgba($color: #ddd, $alpha: 0.5);
  position: absolute;
  text-align: center;
  z-index: 99;
}
.main-charts .up.left{
  width: 10%;
  top: 0;
  left: 0;
}
.main-charts .down.left{
  width: 10%;
  bottom: 0;
  left: 0;
}
.main-charts .up.right{
  width: 85.6%;
  top: 0;
  right: 0;
}
.main-charts .down.right{
  width: 85.6%;
  bottom: 0;
  right: 0;
}
.main-charts .up img,.main-charts .down img{
  height: 1.5rem;
  width: 2.5rem;
  vertical-align: -webkit-baseline-middle;
}
.xAxis{
  position: absolute;
  width: 87.5%;
  height: 2rem;
  bottom: -20px;
  right: 0;
  background: rgb(10,12,31);
  z-index: 9;
}
.none{
  display: none;
}
.current-main{
  background-image: url('~@assets/report/bg.png');
  background-size:100% 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.no-data{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgb(10,12,31);
    font-size: 20px;
    text-align: center;
    padding-top: 10rem;
}
.date{
  border-top: 1px solid #2a3041;
  display: flex;
  align-items: center;
  flex: 0;
  margin-right: 1.5%;
  padding-top: 20px;
  .date-text{
    margin: 0 .5%;
  }
}
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
// .loading{
//   height: 110%!important;
// }
</style>
<style lang="scss">
.el-input--prefix .el-input__inner{
  color:white;
  background-color: #05417f  !important;
  border: 1px solid  !important;
  border-color:  #00a8ff !important;
  border-radius: 0;
}

</style>
